<template>
    <div>
        <template v-if="typeN === 1">
            <div class="demo-upload-list" :key="index" v-for="(item, index) in uploadList">
                <template v-if="item.status === 'finished'">
                    <img :src="item.url" />
                    <div class="demo-upload-list-cover">
                        <Icon type="ios-eye-outline" @click.native="handleView(index)"></Icon>
                        <Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
                    </div>
                </template>
                <template v-else>
                    <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
                </template>
            </div>
        </template>
        <template v-else>
            <div :key="index" v-for="(item, index) in uploadList">
                <template v-if="item.status === 'finished'">
                    <a :href="item.url">{{ item.url }}</a>
                </template>
                <template v-else>
                    <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
                </template>
            </div>
        </template>
        <Upload ref="upload" type="drag" class="upload_box" :show-upload-list="false" :headers="getHeaders()" :max-size="8048" :default-file-list="defaultFileList" :on-exceeded-size="onExceededSize" :before-upload="beforeUpload" :on-success="onSuccess" :action="uploadfile">
            <div style="width: 58px; height: 58px; line-height: 58px">
                <Icon type="ios-camera" size="20"></Icon>
            </div>
        </Upload>

        <viewer :images="uploadList" ref="viewer" v-show="false" :key="'key' + viewerKey">
            <template v-if="typeN === 1">
                <img v-for="(item, index) in uploadList" :src="item.url" :alt="item.name" :key="index" />
            </template>
            <template v-else>
                <a v-for="(item, index) in uploadList" :href="item.url" :key="index">{{ item.name }}</a>
            </template>
        </viewer>
    </div>
</template>

<script>
import api from "@/api";
import store from "@/store";
export default {
    name: "uploadImg",
    props: {
        limit: {
            type: Number,
            default: 1,
        },
        typeN: {
            type: Number,
            default: 1, //1图片，2其它
        },
        imgList: {
            type: Array,
            default: () => [],
        },
    },
    data() {
        return {
            uploadfile: api.getUploadUrl(),
            uploadList: [],
            defaultFileList: [],
            viewerKey: 1,
        };
    },
    created() {
        let defaultFileList = [];
        this.imgList.forEach((item) => {
            defaultFileList.push({
                url: item,
            });
        });
        this.defaultFileList = defaultFileList;
    },
    mounted() {
        this.uploadList = this.$refs.upload.fileList;
    },
    methods: {
        getHeaders() {
            return {
                Authorization: "Bearer " + store.getters.getToken,
            };
        },
        /*onFormatError(file) {
            this.$Notice.warning({
                title: '上传的文件类型不正确',
                desc: '上传的' + file.name + ' 文件类型不正确,文件类型不是jpg，png',
            });
        },*/
        onExceededSize(file) {
            this.$Notice.warning({
                title: "上传文件过大",
                desc: "上传" + file.name + "体积大于2M，请选择体积小点的文件",
            });
        },
        beforeUpload(file) {
            if (this.limit == 1) {
                this.$refs.upload.clearFiles();
                this.$refs.upload.fileList = [];
                this.uploadList = this.$refs.upload.fileList;
                return true;
            }
            const check = this.uploadList.length < this.limit;
            if (!check) {
                this.$Notice.warning({
                    title: "超过最大文件数量限制",
                });
            }
            return check;
        },
        onSuccess(res, file, fileList) {
            if (res.code == 200) {
                file.url = res.data.http_url;
                let imgList = fileList.filter((item) => item.status == "finished").map((item) => item.url);
                this.$emit("change", imgList);
                this.viewerKey++;
            } else {
                this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);
                this.$Message.error(res.msg || "文件上传失败");
            }
        },
        handleView(index) {
            this.$refs.viewer.$viewer.view(index);
        },
        handleRemove(file) {
            const fileList = this.$refs.upload.fileList;
            this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);
            this.$emit("change", this.$refs.upload.fileList);
            this.viewerKey++;
        },
    },
};
</script>

<style>
.demo-upload-list {
    display: inline-block;
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    border: 1px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    position: relative;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    margin-right: 4px;
}

.demo-upload-list img {
    width: 100%;
    height: 100%;
}

.demo-upload-list-cover {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.6);
}

.demo-upload-list:hover .demo-upload-list-cover {
    display: block;
}

.demo-upload-list-cover i {
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    margin: 0 2px;
}

.upload_box {
    display: inline-block;
    width: 58px;
}
</style>
